<template>
	<view class="myPage">
		<view class="topBox flex_space_b">
			<view class="user flex_conter">
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="name_info">
					<view class="nickName">{{userInfo.username}}</view>
					<view class="j_code">{{userInfo.j_code}}</view>
				</view>
			</view>
		</view>
		<view class="contentBox">
			<view class="card">
				<view class="title">我的服务</view>
				<view class="card-content flex_conter flex_wrap">
					<view class="item" @click="goUrl('/pages/my/personbuy')">
						<text class="iconfont icon-gouwuche"></text>
						<view class="text">购卡记录</view>
					</view>
					<view class="item" @click="goUrl('/pages/my/recharge')">
						<text class="iconfont icon-weibiaoti--"></text>
						<view class="text">充值记录</view>
					</view>
					<view class="item" @click="goUrl('/pages/my/orderRecord')">
						<text class="iconfont icon-dingdanjilu"></text>
						<view class="text">预约登记</view>
					</view>
					<view class="item" @click="goUrl('/pages/my/feedback?parent_user=' + parent_user)">
						<text class="iconfont icon-yijianfankui"></text>
						<view class="text">意见反馈</view>
					</view>
				</view>
			</view>
			
			<view class="card mTop3"  v-if="is_manage > 0">
				<view class="card-top flex_space_b" @click="campusOpen">
					<text>切换校区</text>
					<view class="flex_conter">
						<text class="subtitle">{{click_school_agent_name}}</text>
						<uni-icons type="right" size="32rpx" color="#333" />
					</view>
				</view>
				<view class="card-content flex_conter flex_wrap">
					<view class="item" @click="goUrl('/pages/my/achievement?is_me=1')">
						<text class="iconfont icon-yeji"></text>
						<view class="text">我的业绩</view>
					</view>
					<view class="item" @click="goUrl('/pages/my/team?is_open=' + is_manage)" v-if="is_manage == 1">
						<text class="iconfont icon-a-tuanduisvg"></text>
						<view class="text">我的团队</view>
					</view>
					<view class="item" @click="$refs.QRcodePopup.open()" v-if="is_manage == 1">
						<text class="iconfont icon-erweima"></text>
						<view class="text">邀请下级</view>
					</view>
					<view class="item" @click="$refs.QRcodePopupWx.open()">
						<text class="iconfont icon-gongzhonghao"></text>
						<view class="text">公众号二维码</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tabbar">
			<view class="content">
				<view class="item" @click="goUrl('/pages/index/index')">
					<text class="iconfont icon-home"></text>
					<view class="text">首页</view>
				</view>
				<view class="item active">
					<text class="iconfont icon-my"></text>
					<view class="text">我的</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="QRcodePopup" type="center" :isMaskClick="false">
			<view class="QRcodePopupBox">
				<view class="close" @click="$refs.QRcodePopup.close()">
					<uni-icons type="closeempty"></uni-icons>
				</view>
				<view class="QRcodeBox">
					<image class="image" :src="qrcode" mode="widthFix"></image>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="QRcodePopupWx" type="center" :isMaskClick="false">
			<view class="QRcodePopupBox">
				<view class="close" @click="$refs.QRcodePopupWx.close()">
					<uni-icons type="closeempty"></uni-icons>
				</view>
				<view class="QRcodeBox">
					<image class="image" :src="wx_qrcode" mode="widthFix"></image>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="campusPopup" type="bottom" :isMaskClick="false">
			<view class="campus-popup">
				<view class="popup-top">
					<view class="btn cancel-text" @click="$refs.campusPopup.close()">取消</view>
					<view class="title">切换校区</view>
					<view class="btn confirm-text" @click="campusConfirm">确认</view>
				</view>
				<view class="popup-content">
					<picker-view indicatorStyle="height: 44px;" :value="campusValue" @change="campusChange">
						<picker-view-column>
							<view class="item" v-for="(item, index) in campus" :key="index">{{ item.name }}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				qrcode:'',
				userInfo:[],
				parent_user:0,
				is_open:0,
				wx_qrcode:'',
				is_manage:0,
				click_school_agent_name:'',
				click_j_parent_admin_user:0,
				campusValue: [0],
				campus: []
			}
		},
		onLoad(e) {
			if(uni.getStorageSync('schoolId') && uni.getStorageSync('schoolId') != ''){
				this.parent_user = uni.getStorageSync('schoolId')
			}else{
				this.parent_user = e.parent_user;
			}
			// 当前选择的校区代理
			if(uni.getStorageSync('click_j_parent_admin_user') && uni.getStorageSync('click_j_parent_admin_user') != 0){
				this.click_j_parent_admin_user = uni.getStorageSync('click_j_parent_admin_user')
			}
			this.getUserInfo();
			
		},
		methods: {
			getUserInfo(){
				var request={};
				request.click_j_parent_admin_user = this.click_j_parent_admin_user;
				util.requestPost('user/getUserInfo',request, (res) => {
					if (res.code == 1) {
						this.userInfo = res.data.userInfo;
						this.click_school_agent_name = this.userInfo.click_school_agent_name;
						this.is_manage= res.data.is_manage;
						this.campus = res.data.my_school;
						this.click_j_parent_admin_user = this.userInfo.click_j_parent_admin_user;
						uni.setStorageSync('click_j_parent_admin_user',this.userInfo.click_j_parent_admin_user)
						if(this.is_manage > 0){
							this.getQrcode();
						}
						this.$refs.campusPopup.close()
					} 
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			
			getQrcode(){
				var request = {};
				request.click_j_parent_admin_user = this.click_j_parent_admin_user;
				util.requestPost('user/getQrcode', request, (res) => {
					if (res.code == 1) {
						this.qrcode = res.data.list;
						this.wx_qrcode = res.data.wx_qrcode;
					} else {
						
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			goUrl (url) {
				uni.navigateTo({
					url
				})
			},
			campusOpen () {
				this.$refs.campusPopup.open()
			},
			campusChange (e) {
				this.campusValue = e.detail.value;
			},
			campusConfirm () {
				const index = this.campusValue[0]
				this.click_school_agent_name = this.campus[index]['name']
				this.click_j_parent_admin_user = this.campus[index]['value']
				this.getUserInfo();
			}
		}
	}
</script>

<style scoped lang="scss">
.topBox {
	padding: 52rpx;
	background-color: $primary-color;
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.name_info{
		margin-left: 20rpx;
	}
	.nickName {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;

	}
	.j_code {
		color: #FFFFFF;
		font-size: 28rpx;
	}
	.change {
		color: #FFFFFF;
		font-size: 28rpx;
	}
}
.contentBox {
	padding: 32rpx 20rpx;
	.card {
		box-shadow: 0 0 12rpx rgba($color: #000000, $alpha: 0.2);
		border-radius: 20rpx;
		background-color: #FFFFFF;
		.card-top {
			padding: 16rpx 20rpx;
			border-bottom: $border-base;
			.subtitle {
				color: #666;
				font-size: 26rpx;
			}
		}
		.title {
			padding: 16rpx 20rpx;
			border-bottom: $border-base;
		}
		.card-content {
			padding: 30rpx 0;
			.item {
				width: 25%;
				text-align: center;
				color: #666;
				.iconfont {
					font-size: 52rpx;
				}
				.text {
					font-size: 28rpx;
					margin-top: 8rpx;
				}
				&:nth-of-type(n+5) {
					margin-top: 20rpx;
				}
			}
		}
	}
}
.QRcodePopupBox {
	padding: 40rpx;
	text-align: center;
	border-radius: 20rpx;
	background-color: #FFFFFF;
	position: relative;
	.close {
		position: absolute;
		right: 50%;
		bottom: -80rpx;
		transform: translateX(50%);
		width: 52rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
	}
	.QRcodeBox {
		.image {
			width: 400rpx;
		}
	}
}

.campus-popup {
	background-color: #FFFFFF;
	.popup-top {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		.btn {
			width: 44px;
			height: 44px;
			color: #999;
			font-size: 28rpx;
			line-height: 44px;
			text-align: center;
			&.cancel-text {
				color: #666;
			}
			&.confirm-text {
				color: $uni-color-primary;
			}
		}
		.title {
			flex: 1;
			font-size: 32rpx;
			text-align: center;
		}
	}
	.popup-content {
		height: 480rpx;
		.item {
			height: 44px;
			line-height: 44px;
			font-size: 30rpx;
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	
	picker-view-column {
		height: 480rpx !important;
	}
}
</style>
